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XMLTV est un format informatique pour les programmes de télévision. Ce format est XMLTV 
utilisable dans un nombre grandissant d'applications. Le magazine Télérama propose sur son 
site une grille des programmes télé, mais juste consultable sur le web. Pas de XMLTV. 
Rechercher 
Je vous propose donc de combler ce manque avec un petit cours de reverse engineering sur 
le web et la démonstration de quelques outils pour arriver rapidement à vos fins. La grille de OK 
Télérama est une excellente cible pour ce genre d'exercice parce que, vous le verrez, la 
tâche n'est pas simple, mais possible. Elle donne l'ocassion de montrer l'usage de plusieurs 
outils (curl, XSLT, Perl) et c'est un exemple de ma démarche de prototypage rapide en Accueil - Archives 
utilisant le meilleur de chacun. 
MàJ 2008-02-15 : j'ai profondément remanié l'introduction et la conclusion suite à Tags 
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Fil des billets 
Cette grille fonctionne avec des services web W. Cela se voit en cliquant sur les flèches à Fil des commentaires 
gauche ou à droite du bandeau des heures : seule la grille est rechargée, et non pas la page 
entière. Un service web est par définition exploitable pour récupérer des données 
structurées, plus légères que la page entière affichée dans le navigateur. 
La première étape : un survol rapide du source HTML de la page. On repère les éléments 
suivants : 
1. La page est très grosse : 208 381 octets. Toute la grille initiale est donc fournie en HTML. 
Ce sont les mises à jour qui sont fournies en service web. 
2. La page est déclarée comme XHTML W d'après l'entête : 
= xmlns= 
xml : lang= lang= 
3. Plusieurs balises <SCRIPT> en majuscules. Or, en XHTML ces balises doivent être en 
minuscules. Ceci indique déjà que malgré la déclaration le XHTML n'est pas valide et donc 
ne sera pas utilisable directement dans un analyseur XML. 
4. Beaucoup de références à des fichiers JavaScript additionnels. Les familiers d'Ajaxian.com 
détectent vite lesquels sont des librairies JavaScript bien connues. Pour les autres une 
petite recherche sur Google sur le nom du fichier donne rapidement la réponse. 
5. Un bloc de JavaScript révélant l'adresse du service web et le framework utilisé pour 
l'appeler : 
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var 
var 
var 
var 
function 4 1e urn 
j LIN 3 gram arguments, 1);} 
6. Des champs de formulaire tel que celui-ci : 
On voit qu'il s'agit d'une liste de codes pour les différentes chaînes de télé à afficher. 
7. Des appels de fonction JavaScript : 
On note ainsi quelques noms de fonctions qu'on pourra chercher plus tard. 
8. Le code HTML correspondant aux éléments de la grille. Par exemple : 
lass="emis 
ine"style="" 
ori bhetp://a con: 
telerama. sdy. fr/iconsy2/bg grille genre vide.gif'); height: 
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On remarque en particulier l'élement data 8069449 qui n'est pas affiché et qui ressemble à 
des données au format W. 
L'étape suivante consiste à récupérer une copie de la page et de tous les scripts 
additionnels, feuilles de style et images. Il suffit dans Firefox de choisir le menu Fichier 
— Enregistrer sous... — Page complète. 
On obtient les fichiers suivants : 
ls 
grille.php.html grille.php 
ls grille.php fichiers/ 
http://o.mengue.free.fr/blog/post/2008/02/11/51-les-programmes-tele-de-telerama-en-xmltv 2/7 


Les programmes télé de Télérama en XMLTV - Olivier Mengué — Code & rando 


13/05/2014 


menu. js 


milieu 


On peut alors les trier en trois catégories : 


1. les librairies : Scriptaculous, Prototype, Xajax, MochiKit. Repérer les librairies permet 
d'aller sur le web chercher la doc des fonctions et des objets et d'éviter de plonger le nez 
dans du JavaScript compressé. 

2. les pubs et les pisteurs : on les reconnaît au faible nombre de lignes et à la piètre qualité 
du code écrit une fois il y a dix ans et jamais mis à jour en fonction des nouvelles normes 
(XHTML, DOM). Exemple : oas.js 

3. les scripts spécifiques au site : non compressé, avec un nom de fichier, des commentaires 
ou des noms de fonctions en français, ou contenant des noms de fonctions repérés dans 
des gestionnaires d'évènements attachés à un tag HTML (par exemple, 

changerMaintenant () Vu plus haut). Chercher le nom du site (grep telerama *.js) 
permet aussi de les isoler. Ce sont bien sûr les plus importants puisque c'est là que l'on 
trouve les adresses des services web et la manière de les appeler. 


Ce premier aperçu permet de se donner une idée de la compétence du/des développeurs. En 
l'occurence : 


e Malgré la déclaration de l'entête, la page n'est pas du XHTML valide. La validation avec 
l'outil du W3C révèle ainsi 384 erreurs ! 

e Le fichier HTML est énorme (200 Ko), le nombre de fichiers également. Le poids total de 
a page est de plus de 800 Ko ! On a beau être à l'heure de l'ADSL en France, ce n'est 
pas une raison. 

e De nombreuses librairies JavaScript sont utilisées. Leurs fonctions se recouvrent et sont 
redondantes. Il existe au moins 3 façons différentes de faire un appel AJAX. Est-ce que 
plusieurs développeurs ont travaillé sur cette page successivement ? En tout cas le 
manque de coordination est flagrant. 

e Les tags XHTML sont détournés pour stocker des données JSON contenant elles-même du 
HTML (et non du XHTML). Pas étonnant que cela ne valide pas ! 

e Beaucoup de code mort laissé en commentaires dans le JavaScript. 


En somme, pas brillant. 


Nous avons repéré plus haut l'adresse d'un service web. Il est temps de le tester, en dehors 
du navigateur pour examiner les données retournées. Ce service est appellé avec Xajax. En 

fouinant dans xajax.js, on trouve vite (cherchez "postData") la façon dont Xajax envoie les 
données au serveur. On peut alors reconstruire une requête avec curl : 


curl --data "xajax=chargerProgrammegxajaxr=$ (date 
+%$s) exajaxargs[]=$ (date '+%Y-%m-%d 


$H:00:00')exajaxargs[]=192,4,80,34,47,111,118" 
http://television.telerama.fr/tele/grille.php 


On obtient cette fois du beau XML valide dont voici la structure : 


<x)x><cmdn: 
Kend "1 


Le contenu de 1eprogramme est le même que ce que l'on trouve dans la page HTML de base. 


On retrouve notamment la description des programmes à la fois en HTML et en JSON. Ce 
n'est pas vraiment efficace en terme de quantité de données transférées sur le réseau. Les 
données JSON aurait été suffisantes, et je l'avoue, cela m'aurait facilité la tâche. 


Il suffit d'appliquer le filtre XSLT suivant (leprogramme.xsit) pour extraire le contenu de 


leprogramme : 


xmlversion- encodinqg= 
version= xmins 


;!DOCTYPE html [ 


3 lENTITY nbsp "& 


a 
shtmlégt:é&lt:body 
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j&lt;/html& 


@n!= me 


Notez la génération d'un DOCTYPE définissant l'entité "nbsp", définie en HTML mais pas en 
XML. 


Pour l'appliquer : 


xsltproc leprogramme.xslt a.xml > b.xml 


On peut maintenant ouvrir ce fichier dans un navigateur pour vérifier que le document XML 
est valide. Ce n'est pas le cas : 


e Il y a des entités mal formées (voir par exemple l'émission D&CO le dimanche soir sur M6) 
èe Les blocs JSON contiennent contiennent des tags <br> non fermés. 


De plus, il serait bien utile d'extraire les données JSON sous forme de XML pour pouvoir 
continuer notre prototypage avec XSLT. Appellons Perl et le module JSON à la rescousse ! 


xsltproc leprogramme.xslt a.xml | perl -MJSON -npe ' 
if (m@^ *<div id="(data [*"]*)" 
style="display:none;">(["}]*})</div>@) { 
($id, $data)=($1,jsonToObi ($2) ) ; 
$data = join("\n", map { qql<div class="$ ">$data->{$ }</div>| } keys 
$$data) ; 
$_ = "<div id=\"$id\">$data</div>"; 
s@<br>@<br/>@g 
} 
s/&([^;]{8})/&amp;$1/g;' > c.xml 


Lançons un petit test d'extraction XSLT : nous allons lister les chaînes avec 


xmlversion="l.0"encoding="UTr-8"7 
zal y tversion="1.0"xmlns:xsl="http://www.w3.org/199 
9/XSL/Transform"> 
:outputmethod= 


value- 


118: M6 


TE z 
mins:xsl="http://www.w3.org/199 


<tvgenerator-info-name="lélérama … 

source-info- 
url="http://television.telerama.fr/tele/grille.php" 
source-info-name="lélérama"> 


nnel''select- 


(Q "priority="-1"/> 
el"match="div"> 
<channel> 
tributename="id"> 
alue-ofselect="substring(../@id, 6)"/> 
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<iconwidth: 
xsl:attribute >http://icon- 
Celere. sdv. fr/tele/imedia/images chain tra/Transparent/4 


>. 
</channel> 


<programme> 
ttributename=" 
ofselect 
ite> 


ie nae 
2 Of celect Adiy 
1. 
<sub-titlela 
alue E 
</sub-title> 
<desclang 


</desc> 

a q="fr"> 
select= 

</category> 

<lengthunits- 

RS 

</length> 

</programme> 


(.,15,2) )"/> 


Il n'y a plus qu'à enchaîner toutes les étapes dans un script shell ( ) à 


<rvdeneratonr— ina name=" MLTV''source-info- 
url="http://television. telesna. fr/tele/grille.php"source- 
info-name="Télérama"> 


<channelid="111"> 
<display-namelang="fr'">Arte</display-name> 
<iconwidth="40"height-="40Msrc="http://icon- 
telerama.sdv.fr/tele/imedia/images chaines tra/Transparent/4 
0x40/111.gif"/> 

</channel> 


OMstop="200! 
owview 
<titlelang="fr">Arizona Dream</title> 
<sub-titlelang="{fr"/> 
<desclan el, un xelin de 20 ans, vit davant 
dans un monde rempli de s et de pois s volants qu 
New York, où il habite. Par l'esprit, il se a 
souvent sur la banqui: lointaine et ...</desc> 
<categorylang="fr">Film</category> 
<lengthunits= 1>8400</length> 
</programme> 


</tv> 


Pour visualiser le résultat obtenu sous une forme plus lisible pour un humain, je vous 
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recommande d'essayer XSLTv. Vous enregistrez le fichier XMLTV sous tv.xm1 dans le 
répertoire de XSLTv et vous chargez tv.htm1 dans votre navigateur. Vous obtenez ceci : 


Ce n'est pas visuellement aussi beau que le site Télérama, mais pensez que ce n'est que l'une 
des multiples utilisations du format XMLTV : ces données peuvent aussi être utilisées par 
exemple pour piloter un magnétoscope numérique. 


L'étape suivante sera de programmer un proxy en PHP, mais je vous en parlerais plus tard. 


Fichiers joints : 


leprogramme .xslt 
chaines.xsilt 


xmltv.xslt 


tv.sh 


MàJ 2008-03-02 : J'ai mis à jour tv.sh et xmiltv.xsit. Voir ce billet. 


Commentaires 


Le Le samedi 14 juin 2008, 18:54 par weetabix 


2 Le vendredi 25 juillet 2008, 12:24 par yoyo 


3. Le mardi 9 septembre 2008, 12:51 par mod 


4. Le mardi 23 septembre 2008, 14:54 par Olivier - Code &amp; rando 


Ajouter un commentaire 


Nom ou pseudo : 


Adresse email : 
Site web (facultatif) : 


Commentaire : 


Le code HTML est affiché comme du texte et les 
adresses web sont automatiquement transformées. 


PRÉVISUALISER 


La discussion continue ailleurs 


1. Le dimanche 2 mars 2008, 03:05 par Olivier Mengué — Code &amp; rando 
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Télérama — XMLTV : mise à jour 
2008-03-02 J'ai corrigé les fichiers xmltv.xslt et tv.sh... 
URL de rétrolien : http://0.mengue.free.fr/blog/trackback/51 


Fil des commentaires de ce billet 


Propulsé par Dotclear 
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